<template>
	<div class="dd">
		<div class="body">
			<div class="head">
				<div>
					<h3>
						<i class="el-icon-notebook-2"></i>
						&nbsp;我的订单详情
					</h3>
				</div>
				<div class="header"> 
					<div>
						<el-dropdown>
						  <span class="el-dropdown-link">
						    付款<i class="el-icon-arrow-down el-icon--right"></i>
						  </span>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>请选择</el-dropdown-item>
						    <el-dropdown-item>未付款</el-dropdown-item>
						    <el-dropdown-item>已付款</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
					</div>
					<div>
						<el-dropdown>
						  <span class="el-dropdown-link">
						    发货<i class="el-icon-arrow-down el-icon--right"></i>
						  </span>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>请选择</el-dropdown-item>
						    <el-dropdown-item>未发货</el-dropdown-item>
						    <el-dropdown-item>已发货</el-dropdown-item>
							<el-dropdown-item>已签收</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
					</div>
					<div>
						<el-dropdown>
						  <span class="el-dropdown-link">
						    7天内<i class="el-icon-arrow-down el-icon--right"></i>
						  </span>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>请选择</el-dropdown-item>
						    <el-dropdown-item>7天内</el-dropdown-item>
						    <el-dropdown-item>15天内</el-dropdown-item>
							<el-dropdown-item>30天内</el-dropdown-item>
							<el-dropdown-item>60天内</el-dropdown-item>
							<el-dropdown-item>120天内</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
					</div>
					<div>
						<el-button type="primary" icon="el-icon-search">查询</el-button>
					</div>
				</div>
			</div>

			<div>
				<div>
					<el-table :data="list" style="width: 100%" height="250">
						<el-table-column fixed prop="book.pic" label="订单号" width="150">
						</el-table-column>
						<el-table-column prop="book.name" label="收货人" width="120">
						</el-table-column>
						<el-table-column prop="price" label="收货地址" width="120">
						</el-table-column>
						<el-table-column prop="num" label="电话" width="120">
						</el-table-column>
						<el-table-column prop="SumPrice" label="发货单号" width="300">
						</el-table-column>
						<el-table-column prop="zip" label="下单时间" width="120">
						</el-table-column>
						<el-table-column prop="zip" label="总价" width="120">
						</el-table-column>
						<el-table-column prop="zip" label="付款" width="120">
						</el-table-column>
						<el-table-column prop="zip" label="收货" width="120">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'PcDd',
		data() {
			return {
				list: [],
			}
		},
		methods: {
			go(i) {
				this.$router.go(i);
			},
			addPay(i, z) {
				let token = localStorage.getItem('token');
				token = "Bearer " + token;
				let h = {
					headers: {
						'Authorization': token,
					}
				}
				let x = confirm('支付金额￥' + i + ',是否支付？')
				if (x == true) {
					this.$postk('/api/fore/ord/addPay/' + z, null, h).then((rsp) => {
						let fd = new FormData();
						fd.append('days', 7);
						this.$postk('/api/fore/ord/findPageOrders/1/5', fd, h).then((resp) => {
							this.list = resp.data.data.orders;
						})
					})
					alert('支付成功');
					this.$emit('no')
				} else {
					alert('支付失败');
				}
			}
		},
		created() {
			let token = localStorage.getItem('token');
			token = "Bearer " + token;
			let h = {
				headers: {
					'Authorization': token,
				}
			}
			let fd = new FormData();
			fd.append('days', 7);
			this.$postk('/api/fore/ord/findPageOrders/1/5', fd, h).then((resp) => {
				this.list = resp.data.data.orders;
			})
		}
	}
</script>

<style scoped>
	.dd {
		margin-top: 40px;
		margin-right: 8%;
		margin-left: 8%;
		min-height: 88vh;
	}

	.body {
		margin: 0;
		padding: 0;
	}

	.body .head {
		display: flex;
		justify-content: center;
		height: 36px;
		line-height: 36px;
		margin-bottom: 5px;
		background-color: #fff;
		border-top: 10px solid #fff;
		border-bottom: 1px solid #b3d8ff;
		margin-right: -2.5%;
		margin-left: -2.3%;
	}

	.body .head h3 {
		color: #3f7fce;
		font-weight: 800;
	}
	.body .header{
		display: flex;
		    justify-content: flex-end;
		    width: 50vw;
	}
	.body .header div{
		    max-width: 10vw;
		    margin-right: 3px;
	}
</style>